// 元素引用
const container = document.querySelector('.editor-container');
const editor = document.querySelector('.editor-content');

// 自动聚焦
editor.focus();


// 给所有注释添加上点击事件
setTimeout(() => {
  try {
    console.log('添加注释点击事件开始');
    const annotations = document.getElementsByClassName('annotation-marker')
    const annotationList = Array.from(annotations)
    console.log(`annotationList.length: ${annotationList.length}`);
    if (annotationList && annotationList.length > 0) {
      annotationList.forEach((item, index) => {
        console.log(`index: ${index}`);
        item.addEventListener('click', (e) => {
          // console.log(`annotation: ${e.currentTarget.annotation}`)
          // window.manager.showAnnotation(e.currentTarget.annotation)

          const element = e.target
          console.log(`annotation: ${element.getAttribute('annotation')}`);
          window.manager.showAnnotation(element.getAttribute('annotation'))
        })
      })
    }
  } catch (err) {
    console.error(`添加注释点击监听错误: ${err}`);
  }
}, 300);


// 输入滚动逻辑
let scrollTimeout;
editor.addEventListener('input', () => {
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(() => {
    container.scrollTo({
      left: -container.scrollWidth,
      behavior: 'smooth'
    });
  }, 50);
});


// 初始化滚动位置
setTimeout(() => {
  container.scrollLeft = container.scrollWidth;
}, 100);


function getHTMLTextContent() {
  // 创建一个范围对象，并选择编辑器内的所有内容
  const range = document.createRange();
  range.selectNodeContents(editor);

  // 克隆选中的内容
  const clonedContent = range.cloneContents();

  // 创建一个新的容器元素
  const container = document.createElement('div');

  // 将克隆的内容添加到新的容器元素中
  container.appendChild(clonedContent);

  // 使用XMLSerializer将容器序列化为字符串
  const serializer = new XMLSerializer();
  const htmlContent = serializer.serializeToString(container);

  // 移除根节点的命名空间（如果不需要的话）
  const cleanHtmlContent = htmlContent.replace(/^<div[^>]*>|<\/div>$/gi, '');

  return cleanHtmlContent;
}


/**
 * 设置初始文本内容
 * @param {string} HTMLText
 */
function setHTMLTextContent(HTMLText) {
  const parser = new DOMParser();
  let text = ''
  if (HTMLText && HTMLText.startsWith('<p>') && HTMLText.endsWith('</p>')) {
    text = HTMLText
  } else {
    text = `<p>${HTMLText ?? ''}</p>`
  }
  const parsedDoc = parser.parseFromString(text, 'text/html');
  const nodes = parsedDoc.body.childNodes;

  // 将解析后的节点插入编辑器
  nodes.forEach(node => {
    editor.appendChild(node.cloneNode(true)); // 必须复制节点
  });
}


/**
 * 设置文本样式
 * @param {string} styleStr
 * @returns
 */
function applyStyle(styleStr) {
  let styles = JSON.parse(styleStr)
  const selection = window.getSelection();
  if (selection.isCollapsed || !selection.rangeCount) {
    return;
  }

  const range = selection.getRangeAt(0);

  // 创建临时元素用于包裹
  const wrapper = document.createElement('span');
  Object.assign(wrapper.style, styles);

  // 深度处理选区内容
  processRange(range, (node) => {
    // 合并相邻的相同样式元素
    if (node.nodeType === Node.ELEMENT_NODE) {
      const prev = node.previousElementSibling;
      const next = node.nextElementSibling;

      // 合并前一个相同样式节点
      if (prev && isStyleEqual(prev, styles)) {
        prev.appendChild(node.childNodes[0]);
        node.remove();
        node = prev;
      }

      // 合并后一个相同样式节点
      if (next && isStyleEqual(next, styles)) {
        node.appendChild(next.childNodes[0]);
        next.remove();
      }

      // 直接更新现有样式
      if (isStyleEqual(node, styles)) {
        Object.assign(node.style, styles);
        return node;
      }
    }

    // 创建新包裹元素
    const clone = wrapper.cloneNode();
    clone.appendChild(node.cloneNode(false));
    return clone;
  });

  // 清除选区保持美观
  selection.removeAllRanges();
}

// 递归处理选区内的所有文本节点
function processRange(range, processor) {
  const fragment = range.extractContents();
  const walker = document.createTreeWalker(fragment, NodeFilter.SHOW_TEXT);
  const nodes = [];

  while (walker.nextNode()) {
    nodes.push(walker.currentNode);
  }

  nodes.forEach(node => {
    const processed = processor(node);
    if (processed !== node) {
      node.parentNode.replaceChild(processed, node);
    }
  });

  range.insertNode(fragment);
}

// 样式相等性检查
function isStyleEqual(element, styles) {
  return Object.entries(styles).every(([key, value]) =>
  element.style[key] === value
  );
}


// 返回按钮
document.getElementById('back').addEventListener('click', () => {
  window.manager.back()
})


document.getElementById('save').addEventListener('click', () => {
  window.manager.save()
})


function setEditable(editable) {
  editor.setAttribute('contenteditable', JSON.stringify(editable));
}
